<template>
  <!--  九个分类-->
  <div class="health-info-container">
    <div class="category-list">
      <div
          class="category-item first-category"
          @click="handleCategoryClick(categories[0])"
          v-if="categories.length > 0">
        <div class="content">
          <h2>{{ categories[0].title }}</h2>
          <p>{{ categories[0].description }}</p>
        </div>
      </div>
      <!-- 处理其他分类项 -->
      <div
          class="category-item"
          v-for="(category, index) in categories.slice(1)"
          :key="index"
          @click="handleCategoryClick(category)">
        <h3>{{ category.title }}</h3>
        <p>{{ category.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import axios from "axios";
import router from "../router/index.js";

// 定义分类数据
const categories = ref([]);

// 处理分类点击事件
const handleCategoryClick = (category) => {
  // 这里可以添加路由跳转逻辑或显示更多信息
  console.log(`Clicked on category: ${category.title}`);
  router.push(category.link)
};

onMounted(() => {
  axios.get(`http://localhost:8000/app/health_info_category/`)
      .then(res => {
        // console.log(res.data);
        categories.value = res.data;
      })
})
</script>

<style scoped>
.health-info-container {
  margin-top: 20px;
  background-color: #fff;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 设定为三列 */
  gap: 20px; /* 设定间隔 */
  margin-top: 20px; /* 顶部留白 */
  align-items: center; /* 垂直居中 */
  text-align: center; /* 水平居中 */
  grid-template-rows: auto auto; /* 定义两行 */
}

.first-category {
  height: 90%; /* 设定高度 */
  grid-column: 1 / span 2; /* 第一项占用两列 */
  grid-row: 1 / span 2; /* 第一项占用两行 */
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  cursor: pointer;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.first-category:hover {
  background-color: #f5f7fa;
}

.category-item {
  cursor: pointer;
  padding: 15px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.category-item:hover {
  background-color: #f5f7fa;
}

h2, h3 {
  margin: 0 0 10px 0;
  font-size: 1.2em; /* 使用相对单位 */
}

p {
  margin: 0;
  font-size: 0.9em; /* 使用相对单位 */
  color: #606266;
}

/* 媒体查询示例 */
@media (max-width: 600px) {
  h2, h3 {
    font-size: 1em; /* 在小屏幕上缩小字体 */
  }

  p {
    font-size: 0.8em; /* 在小屏幕上缩小字体 */
  }
}
</style>
